<template>
  <div class="flow">
    <div class="formLook">
      <!-- 员工信息卡片 -->
      <div style="background: #f1f1f1; border-radius: 11px">
        <div class="employee-card">
          <div class="firstTitle" @click="$GoBack()">
            <div class="icon">
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </div>
            <div class="topTitle">离职申请</div>
          </div>
          <el-divider />

          <div class="employee-avatar">
            <!--  -->

            <ImageComponent
              :src="userInfoForm.personPhoto"
              width="100px"
              height="100px"
              borderRadius="6px"
            />
          </div>

          <el-form label-width="100px" size="small" style="margin-left: 10px">
            <div class="section-title">
              <span>员工信息</span>
            </div>
            <el-row :gutter="20">
              <!-- <el-col :span="6">
                <el-form-item label="员工账号：" class="inline-form-item">
                  <div class="content-wrapper">
                    <span class="employee-name text-ellipsis">
                      {{ userInfoForm.name }}
                    </span>

                    <el-button @click="InfoClick" class="select-btn">
                      选择员工
                    </el-button>
                  </div>
                </el-form-item>
              </el-col> -->
              <el-col :span="6">
                <el-form-item label="员工账号：" class="compact-form-item">
                  <div class="account-input-wrapper">
                    <el-input
                      v-model="userInfoForm.name"
                      placeholder="自动带出"
                      disabled
                      class="compact-input"
                    >
                      <template #suffix>
                        <el-tooltip content="选择员工账号" placement="top">
                          <el-button
                            type="primary"
                            link
                            @click="InfoClick"
                            class="account-select-btn"
                          >
                            <el-icon><User /></el-icon>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工号：">
                  <span>{{ userInfoForm.jobNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系电话：">
                  <span>{{ userInfoForm.phoneNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工作邮箱：">
                  <span>{{ userInfoForm.mail }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="岗位名称：">
                  <span>{{ userInfoForm.resignOldJobName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="岗位性质：">
                  <span>{{ userInfoForm.jobNature }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="部门：">
                  <span>{{ userInfoForm.oldDeptName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职级：">
                  <span>{{ positionLevelText }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="直属领导：">
                  <span>{{ userInfoForm.directLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最高领导：">
                  <span>{{ userInfoForm.supremeLeaderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入职日期：">
                  <span>{{ userInfoForm.becomeJoinTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="转正日期：">
                  <span>{{ userInfoForm.becomePassTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 申请流程 -->
        <div class="application-form">
          <div class="procedure">
            <div class="procedure_title">申请流程</div>
          </div>
          <el-divider />

          <div style="margin-left: 20px">
            <el-form
              ref="formRef"
              :model="userInfoForm"
              :rules="rules"
              label-width="120px"
              label-position="top"
              style="margin-top: 10px"
            >
              <div class="section-title">
                <span>离职信息</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="离职类型：" prop="resignType">
                    <el-select
                      v-model="userInfoForm.resignType"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <!-- <el-option label="请选择" value=""></el-option> -->
                      <el-option
                        v-for="dict in normalizedTransferType"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预计离职日期：" prop="expectResignTime">
                    <el-date-picker
                      v-model="userInfoForm.expectResignTime"
                      type="date"
                      placeholder="请选择"
                      style="width: 100%"
                      value-format="YYYY-MM-DD"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="离职原因简述：" prop="resignSeason">
                <el-input
                  v-model="userInfoForm.resignSeason"
                  type="textarea"
                  :maxlength="300"
                  placeholder="请输入离职原因"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item
                    label="终止劳动合同确认书："
                    prop="TerminateFileVos"
                  >
                    <Upload
                      :modelValue="userInfoForm.TerminateFileVos"
                      :isShowTip="false"
                    ></Upload>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="离职相关文件：" prop="DocumentsFileVos">
                    <Upload
                      :modelValue="userInfoForm.DocumentsFileVos"
                      :isShowTip="false"
                    ></Upload>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="辞职报告：" prop="resignationFileVos">
                    <Upload
                      :modelValue="userInfoForm.resignationFileVos"
                      :isShowTip="false"
                    ></Upload>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="6">
                  <!-- resignConnectPersonId -->
                  <el-form-item
                    label="离职交接人："
                    prop="resignConnectPersonName"
                  >
                    <el-input
                      v-model="userInfoForm.resignConnectPersonName"
                      placeholder="请选择"
                      style="width: 50%"
                    ></el-input>

                    <el-button @click="OutgoingClick">添加成员</el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="岗位名称：" prop="resignJobName">
                    <el-input
                      v-model="userInfoForm.resignJobName"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="部门：" prop="resignDeptName">
                    <el-input
                      v-model="userInfoForm.resignDeptName"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="岗位性质：" prop="resignJobNature">
                    <el-input
                      v-model="userInfoForm.resignJobNature"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <div class="section-title">
                <span>其他信息</span>
              </div>
              <el-form-item label="备注：" prop="remark">
                <el-input
                  v-model="userInfoForm.remark"
                  type="textarea"
                  :maxlength="300"
                  placeholder="请输入"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item label="其他附件：" prop="saveTransferFileVos">
                <Upload
                  :modelValue="userInfoForm.saveTransferFileVos"
                  :isShowTip="false"
                  @update:modelValue="uploadFiles"
                  @delete="handleFileDelete"
                ></Upload>
              </el-form-item>

              <!-- 按钮 -->
              <div class="button-group">
                <el-button @click="$GoBack()">取消</el-button>
                <el-button @click="submit(false)">保存</el-button>
                <el-button type="primary" @click="submit(true)">提交</el-button>
              </div>
            </el-form>
          </div>
        </div>
        <EmployeeDialog
          ref="employeeDialogRef"
          @update:selected="handleEmployeeSelected"
        />
        <EmployeeDialog
          ref="OutgoingDialogRef"
          @update:selected="OutgoingSelected"
          :pitchId="pitchId"
        />

        <CommonAlertDialog
          v-model="showAgeWarning"
          title="风险提示"
          type="danger"
          :content="`系统检测到离职员工<strong>${userInfoForm.name}</strong>在本单位连续在职时间超过15年且距法定退休年龄不足5年！`"
          confirm-text="继续办理"
          cancel-text="取消操作"
          button-size="large"
          @confirm="onYearsWarningConfirm"
          @cancel="onYearsWarningCancel"
        >
          <template #default>
            <div class="custom-warning">
              <!-- key15 -->
              <el-alert type="error" :closable="false">
                {{ workExperience }}
              </el-alert>
            </div>
          </template>
        </CommonAlertDialog>

        <CommonAlertDialog
          v-model="showContractWarning"
          title="风险提示"
          type="danger"
          :content="`系统检测到离职员工<strong>${userInfoForm.name}</strong>在与本单位连续签订两次固定期限合同期满！`"
          confirm-text="继续办理"
          cancel-text="取消操作"
          button-size="large"
          @confirm="onRelieveWarningConfirm"
          @cancel="onRelieveWarningCancel"
        >
          <template #default>
            <div class="custom-warning">
              <el-alert type="error" :closable="false">
                {{ fixedTerm }}
              </el-alert>
            </div>
          </template>
        </CommonAlertDialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { formatDate } from "@/utils/index.js";
import { applicationDetails } from "@/api/employeeRelations/separationManagement.js";
import { transferInfoId } from "@/api/employeeRelations/transferManagement.js";
import { applicationAdd } from "@/api/employeeRelations/separationManagement.js";
import ImageComponent from "@/components/ImageComponent.vue";
import Upload from "@/components/FileUpload/index.vue";
import TitleComponent from "@/components/TitleComponent.vue";
import EmployeeDialog from "@/components/EmployeeDialog/index.vue";
import CommonAlertDialog from "@/components/CommonAlertDialog/index.vue";
import useUserStore from "@/store/modules/user";
import { getKey } from "@/api/index.js";
import { fetchKeyData } from "@/utils/api";
// sys_transfer_type

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_transfer_type } = proxy.useDict("sys_transfer_type");
const pitchId = ref(null);
const userStore = useUserStore();
const workExperience = ref(""); //工作年限提示
const fixedTerm = ref("");

const hasEmployeeRole = computed(() => {
  return userStore.roles.includes("HR");
});
console.log(hasEmployeeRole, "hasEmployeeRole");

const normalizedTransferType = computed(() => {
  return sys_transfer_type.value.map((item) => ({
    label: item.label,
    value: Number(item.value), // 确保为数字类型
  }));
});

const showAgeWarning = ref(false);
const showContractWarning = ref(false);
// 新增状态：记录当前待处理的弹窗队列
const pendingWarnings = ref([]);

const employeeName = ref("张三");
const employeeDialogRef = ref(null);
const OutgoingDialogRef = ref(null);
const userInfoForm = reactive({
  id: "",
  deptId: "", //部门名称
  personPhoto: "", //图片
  name: "", //员工账号
  jobNumber: "", //工号
  phoneNumber: "", //联系电话
  mail: "", //工作邮箱
  resignOldJobName: "", //岗位名称
  applicationPositonId: "", // 调岗前岗位id
  oldDeptName: "", //前部门
  jobNature: "", //岗位性质
  positionLevel: "", //职级
  directLeaderName: "", //直属领导
  supremeLeaderName: "", //最高领导
  becomeJoinTime: "", // 入职日期
  becomePassTime: "", //转正日期
  typeTransfer: "", //调岗类型
  applyDate: "", //申请日期

  nowDepartmentJobName: "", //调岗后岗位名称
  newJobId: "", //调岗后岗位id
  nowJobNature: "", //调岗后岗位性质
  newDeptName: "", //调岗后部门

  requireDeptId: "", // 调动后部门id

  nowPositionLevel: "", //调岗后职级

  leaderAfterTransferName: "", //调岗后直属领导
  leaderAfterTransferId: "", //调岗后直属领导id
  leaderAfterHighName: "", //调岗后最高领导
  leaderAfterHighId: "", //最高领导id
  reasonTransfer: "", //调岗说明
  saveTransferFileVos: [], //附件

  resignSeason: "", // 离职原因描述
  resignType: "", //离职类型
  expectResignTime: "", // 预计离职日期
  resignConnectPersonId: "", //离职交接人id

  resignConnectPersonName: "", //离职交接人姓名

  resignJobId: "", //离职岗位id

  resignDeptId: "", //离职部门id
  remark: "", //备注
  uploadFile: "", //上传文件

  resignJobName: "", //离职交接人员名称
  resignDeptName: "", //离职交接人员部门
  resignJobNature: "", //交接人员岗位性质

  workingYears: 16, // 假设从接口获取的连续在职年数
  retirementAgeGap: 4, // 假设从接口获取的距退休年数

  signedFixedTermCount: 2, // 已签订固定期限合同次数
  currentContractType: "fixed", // 当前合同类型（fixed/indefinite）

  TerminateFileVos: [], //劳动关系确认书
  DocumentsFileVos: [], //离职相关文件
  resignationFileVos: [], //辞职报告
});

const rules = reactive({
  typeTransfer: [
    { required: true, message: "请选择调岗类型", trigger: "change" },
  ],
  applyDate: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  nowDepartmentJobName: [
    { required: true, message: "请选择调入岗位", trigger: "blur" },
  ],
  reasonTransfer: [
    { required: true, message: "请输入调岗说明", trigger: "blur" },
  ],
  resignSeason: [
    {
      required: true,
      message: "请填写离职原因简述",
      trigger: "blur",
    },
  ],
  // TerminateFileVos: [
  //   {
  //     required: true,
  //     message: "请上传劳动关系确认书",
  //     trigger: "blur",
  //   },
  // ],
  // resignationFileVos: [
  //   {
  //     required: true,
  //     message: "请上传辞职报告",
  //     trigger: "blur",
  //   },
  // ],
});

const formRef = ref(null);
const route = useRoute();
onMounted(async () => {
  if (route.query.id) {
    getDetails();
  }

  try {
    const [workRes, contractRes] = await Promise.all([
      fetchKeyData("riskKey", "员工key15"),
      fetchKeyData("riskKey", "员工key16"),
    ]);

    workExperience.value = workRes?.data?.[0]?.value || "";
    fixedTerm.value = contractRes?.data?.[0]?.value || "";
  } catch (error) {
    console.error("数据获取失败:", error);
  }
});

function getDetails() {
  let employeeResignId = route.query.id;

  applicationDetails(employeeResignId).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          userInfoForm[item] = res.data[item];
          userInfoForm.name = res.data.applicantPersonName;

          userInfoForm.typeTransfer = res.data.typeTransfer;
          userInfoForm.directLeaderName = res.data.directLeaderName;
          userInfoForm.oldDeptName = res.data.resignOldDeptName;
          userInfoForm.becomeJoinTime = formatDate(res.data.joinTime).dates;
          userInfoForm.becomePassTime = formatDate(
            res.data.becomePassTime
          ).dates;
          userInfoForm.resignType = res.data.resignType;

          userInfoForm.jobNature = res.data.resignBeforeJobNature;

          userInfoForm.saveTransferFileVos = res.data.employeeResignFileVoList;
        }
      });

      // if (res.data.processId) {
      //   procInsId.value = res.data.processId;
      //   init(res.data.processId);
      // }
    }
  });
}

// 根据选中的员工id查询
function handleEmployeeSelected(item) {
  console.log(item, "选中的值");
  console.log(item[0]);

  let params = {
    id: item[0],
  };
  transferInfoId(params).then((res) => {
    console.log(res.data, "调岗信息");
    console.log(res.data.JoinTime, "res.data.JoinTime");
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        // 先重置为默认值（根据类型处理）
        userInfoForm[item] = typeof res.data[item] === "number" ? 0 : "";
        // 赋值前进行空值保护
        userInfoForm[item] = res.data[item] ?? userInfoForm[item];

        userInfoForm.oldDeptName = res.data.deptName;

        userInfoForm.resignOldJobName = res.data.applicationPositonName;

        userInfoForm.becomeJoinTime = res.data.joinTime;
        // 离职人列表内不可选中id

        pitchId.value = res.data.id;
      });
    }
  });
}
// 离职交接人员回显
// userInfoForm.handoverPerson = res.data.name;
// userInfoForm.resignConnectPersonId = res.data.id; //离职交接人id
// userInfoForm.positionName = res.data.resignOldJobName; // 岗位名称
// userInfoForm.department = res.data.deptName; // 部门
// userInfoForm.HandoverjobNature = res.data.jobNature;
// userInfoForm.resignJobId = res.data.applicationPositonId; // 岗位id
// userInfoForm.resignDeptId = res.data.deptId;
// 根据选中的员工id查询
function OutgoingSelected(item) {
  let params = {
    id: item[0],
  };
  transferInfoId(params).then((res) => {
    console.log(res.data, "调岗信息");
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        // 离职交接人员回显
        userInfoForm.resignConnectPersonName = res.data.name;
        userInfoForm.resignConnectPersonId = res.data.id; //离职交接人id
        userInfoForm.resignJobName = res.data.resignOldJobName; // 离职岗位名称resignOldJobName
        userInfoForm.resignDeptName = res.data.deptName; // 部门
        userInfoForm.resignJobNature = res.data.jobNature; //岗位性质

        userInfoForm.resignJobId = res.data.applicationPositonId; // 岗位id

        userInfoForm.resignDeptId = res.data.deptId;
      });
    }
  });
}
// const submit = (isSubmit) => {

//   // 表单验证
//   formRef.value.validate((valid) => {
//     if (!valid) {
//       ElMessage.error("请填写离职员工的基本信息");
//       return;
//     }

//     // 设置请求参数
//     let params = {
//       id: route.query.text == "edit" ? route.query.id : "",
//       type: isSubmit ? 1 : 0,
//       flowKey: "EMPLOYEE_RESIGN_MANAGEMENT",
//       applicantPersonId:
//         route.query.text === "edit"
//           ? userInfoForm.applicantPersonId
//           : userInfoForm.id,
//       resignType: userInfoForm.resignType,
//       expectResignTime: userInfoForm.expectResignTime,
//       resignSeason: userInfoForm.resignSeason,
//       resignConnectPersonId: userInfoForm.resignConnectPersonId,
//       resignJobId: userInfoForm.resignJobId,
//       resignDeptId: userInfoForm.resignDeptId,
//       remark: userInfoForm.remark,
//       saveEmployeeResignFileDtoList: userInfoForm.saveTransferFileVos,
//       resignJobNature: userInfoForm.resignJobNature,
//     };

//     console.log(params, "参数");
//     // 发送请求
//     applicationAdd(params)
//       .then((res) => {
//         if (res.code === 200) {
//           ElMessage.success(isSubmit ? "提交成功" : "保存成功");
//           // 跳转到相应页面或其他操作

//           proxy.$GoBack();
//         } else {
//           ElMessage.error(res.message || "操作失败");
//         }
//       })
//       .catch((error) => {
//         // console.error("Error during submission:", error);
//         // ElMessage.error("操作失败，请检查网络或联系管理员");
//       });
//   });
// };

// 计算是否满足强提醒条件
const needStrongWarning = computed(() => {
  return (
    hasEmployeeRole &&
    userInfoForm.workingYears >= 15 &&
    userInfoForm.retirementAgeGap <= 5
  );
});

const needContractWarning = computed(() => {
  return (
    hasEmployeeRole &&
    userInfoForm.signedFixedTermCount >= 2 &&
    userInfoForm.currentContractType === "fixed"
  );
});

const submit = (isSubmit) => {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage.error("请填写离职员工的基本信息");
      return;
    }

    if (!isSubmit) return handleSaveOrSubmit(false);
    // 非提交操作直接保存

    // 构建弹窗队列（按业务优先级排序）
    const warnings = [];
    if (needStrongWarning.value) warnings.push("age");
    if (needContractWarning.value) warnings.push("contract");
    pendingWarnings.value = warnings;

    // 开始处理队列
    processNextWarning();
  });
};
// 核心：链式处理弹窗队列
const processNextWarning = () => {
  if (pendingWarnings.value.length === 0) {
    // 所有弹窗处理完毕，执行提交
    handleSaveOrSubmit(true);
    return;
  }

  // 取出下一个弹窗类型
  const nextType = pendingWarnings.value.shift();
  switch (nextType) {
    case "age":
      showAgeWarning.value = true;
      break;
    case "contract":
      showContractWarning.value = true;
      break;
  }
};

// 强提醒弹窗确认回调
const onYearsWarningConfirm = () => {
  showAgeWarning.value = false;
  processNextWarning();
  // handleSaveOrSubmit(true); // 继续提交
};

const onRelieveWarningConfirm = () => {
  showContractWarning.value = false;
  processNextWarning();
  // handleSaveOrSubmit(true); // 继续提交
};

// 处理实际保存/提交逻辑
const handleSaveOrSubmit = async (isSubmit) => {
  const params = {
    id: route.query.text == "edit" ? route.query.id : "",
    type: isSubmit ? 1 : 0,
    flowKey: "EMPLOYEE_RESIGN_MANAGEMENT",
    applicantPersonId:
      route.query.text === "edit"
        ? userInfoForm.applicantPersonId
        : userInfoForm.id,
    resignType: userInfoForm.resignType,
    expectResignTime: userInfoForm.expectResignTime,
    resignSeason: userInfoForm.resignSeason,
    resignConnectPersonId: userInfoForm.resignConnectPersonId,
    resignJobId: userInfoForm.resignJobId,
    resignDeptId: userInfoForm.resignDeptId,
    remark: userInfoForm.remark,
    saveEmployeeResignFileDtoList: userInfoForm.saveTransferFileVos,
    resignJobNature: userInfoForm.resignJobNature,
  };

  try {
    const res = await applicationAdd(params);
    if (res.code === 200) {
      ElMessage.success(isSubmit ? "提交成功" : "保存成功");
      proxy.$GoBack();
    } else {
      ElMessage.error(res.message || "操作失败");
    }
  } catch (error) {
    console.error("操作失败:", error);
  }
};

// 强提醒弹窗取消回调
const onYearsWarningCancel = () => {
  showAgeWarning.value = false;
  ElMessage.info("已取消特殊员工离职提交");
};

// 强提醒弹窗取消回调
const onRelieveWarningCancel = () => {
  showContractWarning.value = false;
  ElMessage.info("已取消特殊员工离职提交");
};

const positionLevelText = computed(() => {
  const positionLevelMap = {
    0: "初级",
    1: "中级",
    2: "高级",
  };
  return positionLevelMap[userInfoForm.positionLevel] || "";
});
const InfoClick = async () => {
  employeeDialogRef.value.open((value) => {});
};

// 离职人
const OutgoingClick = async () => {
  OutgoingDialogRef.value.open((value) => {
    console.log(value);
  });
};

const uploadFiles = (files) => {
  if (!userInfoForm.saveTransferFileVos) {
    userInfoForm.saveTransferFileVos = [];
  }
  userInfoForm.saveTransferFileVos.push({
    file: files,
  });
};

const handleFileDelete = (updatedFiles) => {
  console.log(updatedFiles, "updatedFiles");
  userInfoForm.saveTransferFileVos = updatedFiles;
};
</script>

<style scoped>
.container {
  margin: 0 auto;
}

.back-button {
  margin-bottom: 20px;
}

.employee-card {
  background-color: #fff;
  border-radius: 8px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  margin-bottom: 10px;
}

.employee-avatar {
  text-align: left;
  margin-bottom: 20px;
  margin-top: 20px;
}

.application-form {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* padding: 20px; */
}

.button-group {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
}

:deep(.el-textarea__inner) {
  resize: none;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  color: #16191d;
}
.position-container {
  display: flex;
}

.contianer-left {
  width: 48%;
}
.contianer-right {
  width: 48%;
}

/* 表单项整体布局 */
.inline-form-item :deep(.el-form-item__content) {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
}

/* 内容容器 */
.content-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
  gap: 12px;
}

/* 员工姓名显示样式 */
.employee-name {
  /* flex: 1; */
}

/* 按钮样式优化 */
.select-btn {
  flex-shrink: 0;
  padding: 10px 15px;
}

/* 响应式处理 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-wrap: wrap;
  }

  .employee-name {
    max-width: 100%;
    flex-basis: 100%;
  }

  .select-btn {
    width: 100%;
    margin-top: 8px;
  }
}
.procedure {
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  color: #16181d;
  font-size: 14px;
}
</style>
